<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Electric Flux through a Hemisphere</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    /**
     * Helper function to draw a line with an arrowhead.
     * @param {CanvasRenderingContext2D} ctx - The canvas rendering context.
     * @param {number} fromx - The starting x-coordinate.
     * @param {number} fromy - The starting y-coordinate.
     * @param {number} tox - The ending x-coordinate.
     * @param {number} toy - The ending y-coordinate.
     * @param {number} [headlen=10] - The length of the arrowhead sides.
     */
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing ---

    // Define central coordinates and dimensions for the hemisphere
    const centerX = 220;
    const centerY = 160;
    const radiusY = 90; // Vertical radius of the base
    const radiusX = 35; // Horizontal radius of the base (perspective)

    // Set default drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw the uniform Electric Field (E)
    ctx.lineWidth = 1.5;
    const fieldStartX = 40;
    const fieldEndX = 450;
    const numLines = 5;
    const lineSpacing = 30;
    
    for (let i = 0; i < numLines; i++) {
        const y = centerY - (numLines - 1) / 2 * lineSpacing + i * lineSpacing;
        drawArrow(ctx, fieldStartX, y, fieldEndX, y, 8);
    }

    // Draw the label for the electric field
    ctx.font = 'italic 28px "Times New Roman"';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('E', fieldEndX + 10, centerY);

    // 2. Draw the closed semi-spherical surface
    ctx.lineWidth = 2;

    // Draw the circular base (as an ellipse in this perspective)
    ctx.beginPath();
    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw the curved dome part of the hemisphere
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - radiusY); // Start at the top of the ellipse
    // Use a quadratic curve for a smooth dome shape
    ctx.quadraticCurveTo(centerX + 130, centerY, centerX, centerY + radiusY);
    ctx.stroke();

    // 3. Draw the labels 'O' (center) and 'R' (radius)
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'center';
    
    // Draw the label 'O' for the center of the base
    ctx.fillText('O', centerX - 18, centerY);

    // Draw the radius line 'R'
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    // Calculate the endpoint on the ellipse for a visually pleasing angle
    const angleR = Math.PI * 0.4;
    const endRx = centerX + radiusX * Math.cos(angleR);
    const endRy = centerY + radiusY * Math.sin(angleR);
    ctx.lineTo(endRx, endRy);
    ctx.stroke();
    
    // Draw the label 'R' for the radius
    ctx.fillText('R', centerX + 20, centerY + 40);

    // 4. Draw the caption below the figure
    ctx.font = '22px "SimSun", "Songti SC", sans-serif'; // Use common Chinese fonts
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText('习题 7-14 图', canvas.width / 2, 320);

</script>
</body>
</html>